// Place all the styles related to the todoitems controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import 'compass/css3';

.todolist{
  background:white;
  width:550px;
  position:relative;
  margin:130px auto 40px auto;
  @include box-shadow(0 0 1em black);

  .todo-header{
    position:relative;
    top:0;
    left:0;

    form{
      margin:0;
      padding:15px 15px 15px 60px;

      input{
        width:100%;
        height:100%;
        font-size:20px;
        border:none;
        margin-bottom:0;
        @include box-shadow(none);
      }
    }

    .toggle-all{
      @include appearance(none);
      @include rotate(90deg);
      position:absolute;
      margin:0;
      top:20px;
      left:3px;
      width:40px;

      &:before{
        content:'»';
        font-size:30px;
        padding:20px 0;
        color:#d9d9d9;
      }

      &:checked:before{
        color:#737373;
      }
    }
  }

  .todo-main{
    li{
      position:relative;
      top:0;
      left:0;
      border:1px dotted #ccc;

      .toggle{
        @include appearance(none);
        top:0;
        margin:auto 0;
        width:40px;
        height:auto;
        text-align:center;
        position:absolute;
        color:gray;
        cursor:default;

        &:after{
          content:'✔';
          line-height:50px;
          font-size:20px;
          @include text-shadow(0 -1px 0 #bfbfbf);
          color:#d9d9d9;
        }

        &:checked:after{
          color:#737373;
        }

      }

      label{
        margin-left:40px;
        padding:15px;
        font-size:20px;
        cursor:default;

        @include transition(color 0.4s);
      }
    }
  }

  .todo-footer{
    color:#777;
    padding:0 15px;
    position:absolute;
    right:0;
    bottom:-31px;
    left:0;
    height:20px;
    z-index:1;
    text-align:center;

    &:before{
      content:'';
      position:absolute;
      right:0;
      bottom:31px;
      left:0;
      height:50px;
      z-index:-1;
      box-shadow:0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 0 -3px rgba(255, 255, 255, 0.8), 0 7px 1px -3px rgba(0, 0, 0, 0.3), 0 43px 0 -6px rgba(255, 255, 255, 0.8), 0 44px 2px -6px rgba(0, 0, 0, 0.2);
    }
  }

  .selected{
    color:gray;
    text-decoration:line-through;
  }
}
